<template>
  <div class = "login">
    <div class = "login-content">
      <div class = "left">
        <div class = "title">
          <img/>
          <span>{{ loginTitle }}</span>
        </div>
        <div class = "left_content">
          <div>

            <div style = "text-align:center;color: rgba(255, 255, 255,1);font-size: 1.875rem;
    line-height: 2.25rem;">欢迎使用本系统
            </div>
            <img src = "../assets/login-box-bg.svg" alt = "" style = "width:350px">
            <div style = "text-align: center;color: rgba(255, 255, 255,.8);">CopyRight@2020-2023</div>
          </div>
        </div>
      </div>
      <div class = "right">
        <div class = "title"></div>
        <div class = "right-content">
          <el-form
              :model = "loginForm"
              :rules = "loginRules"
              class = "login-form animate__animated animate__fadeIn"
              label-position = "top"

              ref = "loginForm"
          >
            <h2 style = "text-align: center;font-weight: 700;font-size:1.5rem;line-height:2rem;width: 100%;">登录</h2>
            <el-form-item prop = "userName" label = "用户名" required>
              <el-input
                  auto-complete = "off"
                  placeholder = "请输入用户名"
                  prefix-icon = "User"
                  type = "text"
                  v-model = "loginForm.userName"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop = "password" label = "密码" required>
              <el-input
                  @keyup.enter = "handleLogin"
                  prefix-icon = "Lock"
                  auto-complete = "off"
                  placeholder = "请输入密码"
                  type = "password"
                  v-model = "loginForm.password"
              >
                <i slot = "suffix"
                   :icon = "[flag?'Hide':'View']"
                   style = "margin-top:8px;font-size:18px;"
                   @click = "getFlag()"/>
              </el-input>
            </el-form-item>
            <!--            <el-form-item prop="code" required>
                            <el-input @keyup.enter.native="handleLogin" auto-complete="off" placeholder="验证码" style="width: 63%"
                                      v-model="loginForm.code">
                                <svg-icon class="el-input__icon input-icon" icon-class="validCode" slot="prefix"/>
                            </el-input>
                            <div class="login-code">
                                <img :src="validateImg" @click="refreshValidate">
                            </div>
                        </el-form-item>-->
            <el-row>
              <el-col :span = "18">
                <el-checkbox style = "margin: 0 0 25px 0" v-model = "loginForm.rememberMe">
                  记住我
                </el-checkbox>
              </el-col>
              <el-col :span = "6">
                <el-button link size = "normal">忘记密码？</el-button>
              </el-col>
            </el-row>

            <!--            <el-checkbox :label="bkLabel" @change="operDynamicBackground"></el-checkbox>-->
            <el-form-item style = "width: 100%">
              <el-button

                  :loading = "loading"
                  @click = "handleLogin"
                  style = "width: 100%"
                  type = "primary"
              >
                <span v-if = "!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--  底部  -->
    </div>
  </div>

</template>

<script>
import background from "@/assets/2.jpg";
import Setting from "@/settings";
import {getValidateImg, userLogin} from "../api/star_horse";
import {JSEncrypt} from "jsencrypt";
import {removeToken} from "@/utils/auth";

export default {
  name: "Login",
  data() {
    return {
      loginTitle: Setting.title,
      backImage: background,
      validateImg: "",
      uuid: "",
      bkLabel: "开启动态背景",
      index: 1,
      flag: false,
      redirect: undefined,
      publicKey: Setting.publicKey,
      loading: false,
      loginForm: {},
      loginRules: {
        userName: [
          {required: true, trigger: "blur", message: "用户名不能为空"},
        ],
        password: [
          {required: true, trigger: "blur", message: "密码不能为空"},
        ],
      },
    };
  },
  methods: {
    getFlag() {
      this.flag = !this.flag;
    },
    /**
     * 处理登录信息
     */
    handleLogin() {
      let that = this;
      that.$refs.loginForm.validate((valid) => {
        that.loading = !that.loading;
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(that.publicKey);
        const user = {
          userName: that.loginForm.userName,
          password: that.loginForm.password,
          rememberMe: that.loginForm.rememberMe,
          tokenId: that.uuid,
          validCode: that.loginForm.code,
          uuid: that.loginForm.uuid,
        };
        //密码加密传输，需要加密时去掉注释，单后端认证服务需支持
        // user["password"] = encrypt.encrypt(that.loginForm.password);
        if (valid) {
          userLogin(user, this.redirect, function (code) {
            if (code == -1) {
              that.loading = false;
            }
          });
        }
      });
    },
    refreshValidate() {
      let that = this;
      removeToken();
      getValidateImg().then((res) => {
        let record = res.data.data;
        that.validateImg = record.img;
        that.uuid = record.uuid;
        // that.publicKey = record.publicKey;
      });
    },
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.refreshValidate();
  },
};
</script>
<style lang = "scss" scoped>
::v-deep #app {
  height: 100%;
  margin: 0 auto;
}

.login {
  position: relative;
  height: 100%;

  .login-content {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 100%;

    .left {
      padding: 30px;
      flex: 1 1 0%;
      --tw-bg-opacity: 0.2;
      --tw-bg-opacity: 1;
      background-color: rgba(107, 114, 128, 1);

      .title {
        position: relative;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 1);

        img {
          margin-right: 10px;
          height: 48px;
          display: block;
          vertical-align: middle;
          border-style: solid;
          max-width: 100%;
        }

        span {
          font-size: 20px;
          line-height: 1;
          font-weight: 700;
        }
      }

      .left_content {
        height: calc(100% - 60px);
        justify-content: center;
        align-items: center;
        display: flex;
      }
    }

    .right {
      padding: 30px;
      flex: 1 1 0%;

      .title {
        justify-content: flex-end;
        color: rgba(255, 255, 255, 1);
        align-items: center;
        display: flex;
      }

      .right-content {
        max-width: 500px;
        margin: auto;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}

.__title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 500px;
  padding: 25px 25px 5px 25px;
}

.login-form .el-input,
.el-button,
.login-form.el-input input {
  height: 42px;
}

.el-button > span {
  font-size: 18px;
}

.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
}

.login-code img {
  cursor: pointer;
  vertical-align: middle;
}

.login-footer {
  width: 100%;
  clear: both;
}

.login-footer > span {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
</style>